const getStudents = async () => {
  const res = await axios.get("/students")
  document.querySelector(".total").innerHTML = res.data.length
  document.querySelector(".list").innerHTML = res.data
    .map((item) => {
      return `
      <tr>
        <td>${item.name}</td>
        <td>${item.age}</td>
        <td>${item.gender === 0 ? "男" : "女"}</td>
        <td>第${item.group}组</td>
        <td>${item.hope_salary}</td>
        <td>${item.salary}</td>
        <td>${item.province + item.city + item.area}</td>
        <td>
          <a href="javascript:;" class="text-success mr-3"><i data-id='${
            item.id
          }' class="bi bi-pen"></i></a>
          <a href="javascript:;" class="text-danger"><i data-id='${
            item.id
          }' class="bi bi-trash"></i></a>
        </td>
      </tr> 
    `
    })
    .join("")
}
// 删除操作
document.querySelector(".list").addEventListener("click", async function (e) {
  if (e.target.classList.contains("bi-trash")) {
    const id = e.target.dataset.id
    try {
      await axios.delete(`./students/${id}`)
      tip("删除成功")
      getStudents()
    } catch (e) {
      console.log(e.message)
    }
  }
})
// 处理模态框
const modal = new bootstrap.Modal(document.querySelector("#modal"))
// 添加学员
document
  .querySelector("#openModal")
  .addEventListener("click", async function () {
    document.querySelector(".modal-title").innerHTML = "添加学员"
    document.querySelector("#form").dataset.id = "add"
    await renserProvince()
    await renserCity()
    await renserArea()
    modal.show()
  })
// 修改学员信息
document.querySelector(".list").addEventListener("click", async function (e) {
  if (e.target.classList.contains("bi-pen")) {
    const id = e.target.dataset.id
    document.querySelector(".modal-title").innerHTML = "修改学员信息"
    document.querySelector("#form").dataset.id = id
    await renserProvince("河南省")
    await renserCity("郑州市")
    await renserArea("金水区")
    modal.show()
  }
})
// 提交数据
const submit = document.querySelector("#submit")
submit.addEventListener("click", async function (e) {
  const form = document.querySelector("#form")
  if (form.dataset.id === "add") {
    const data = serialize(form, { hash: true })
    for (const k in data) {
      if (isNaN(data[k]) === false) {
        data[k] = +data[k]
      }
    }
    const res = await axios.post("/students", data)
    tip(res.message)
    modal.hide()
    getStudents()
    form.reset()
  } else {
  }
})
// 获取省份数据
const renserProvince = async (province = "") => {
  const res = await axios.get("/api/province")
  document.querySelector("[name=province]").innerHTML = res.data
    .map((item) => {
      return `<option value="${item}">${item}</option>`
    })
    .join("")
  province && (document.querySelector("[name=province]").value = province)
}
// 获取市份数据
const renserCity = async (city = "") => {
  const pname = document.querySelector('[name="province"]').value
  const res = await axios.get("/api/city", { params: { pname } })
  document.querySelector("[name=city]").innerHTML = res.data
    .map((item) => {
      return `<option value="${item}">${item}</option>`
    })
    .join("")
  city && (document.querySelector("[name=city]").value = city)
}
// 获取区域数据
const renserArea = async (area = "") => {
  const pname = document.querySelector('[name="province"]').value
  const cname = document.querySelector("[name=city]").value
  const res = await axios.get("/api/area", { params: { pname, cname } })
  if (res.data !== undefined) {
    document.querySelector("[name=area]").innerHTML = res.data
      .map((item) => {
        return `<option value="${item}">${item}</option>`
      })
      .join("")
    area && (document.querySelector("[name=area]").value = area)
  } else {
    document.querySelector("[name=area]").innerHTML =
      '<option value="">--无--</option>'
  }
}
// 省市区联动
document
  .querySelector("[name=province")
  .addEventListener("change", async () => {
    await renserCity()
    await renserArea()
  })
document.querySelector("[name=city").addEventListener("change", async () => {
  await renserArea()
})
getStudents()
